<template>



  <RouterView v-slot="{Component,route}">
    <KeepAlive include="CategoryView">
      <component :is="Component" :key="route.query.id"></component>
    </KeepAlive>
  </RouterView>


  <van-tabbar v-if="isShowTabbar" route v-model="active" active-color="#CEA62A" inactive-color="#A8A8A8">
    <van-tabbar-item replace :to="item.path" v-for="item in tabbarList" :key="item.path">
      <span>{{ item.text }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { RouterView } from 'vue-router'
import {ref,watch} from 'vue'
import { getImageUrl } from '@/utils/index.js';
import { useRoute } from 'vue-router';
const route = useRoute()
const active = ref(0);
const isShowTabbar = ref(true)
const tabbarList = [
  {
    path:'/home',
    text:'首页',
    active:getImageUrl('home-active'),
    inactive:getImageUrl('home')
  },
  {
    path:'/topic',
    text:'专题',
    active:getImageUrl('topic-active'),
    inactive:getImageUrl('topic')
  },
  {
    path:'/category',
    text:'分类',
    active:getImageUrl('category-active'),
    inactive:getImageUrl('category')
  },
  {
    path:'/cart',
    text:'购物车',
    active:getImageUrl('cart-active'),
    inactive:getImageUrl('cart')
  },
  {
    path:'/my',
    text:'我的',
    active:getImageUrl('user-active'),
    inactive:getImageUrl('user')
  }
]

// 侦听路由变化
watch(()=>route.path,(to,from)=>{
  const pathArr = ['/home','/topic','/category','/cart','/my']
  if(pathArr.includes(to)){
    isShowTabbar.value = true
  }else{
    isShowTabbar.value = false
  }
})

var userInfo = {

"openId":"66",

"nickName":"赵六",

"avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132"

};

var openId = userInfo.openId;

localStorage.setItem("userInfo", JSON.stringify(userInfo));

localStorage.setItem("openId", openId);

</script>
<style scoped></style>
